<template>
  <div class="produce-info-dialog" v-if="drawerVisible">
    <el-dialog v-model="drawerVisible" :destroy-on-close="true" :title="dialogLabel" :width="1014" draggable align-center>
      <el-scrollbar height="100%">
        <div class="info-container">
          <el-form
            class="drawer"
            ref="ruleFormRef"
            label-width="100px"
            label-suffix=" :"
            :rules="rules"
            :model="paramsCar"
            label-position="top"
            :disabled="paramsCar.uiType == 2"
          >
            <div class="device-icon">
              <el-form-item label="设备图片" prop="imagePath">
                <Upload
                  v-model:image-url="paramsCar!.imagePath"
                  width="225px"
                  height="225px"
                  :file-size="30"
                  :prefix-data="PRODUCT"
                >
                  <template #empty>
                    <!-- <el-icon><Avatar /></el-icon> -->
                    <span>请上传主图</span>
                  </template>
                  <!-- <template #tip> 主图大小不能超过 3M </template> -->
                </Upload>
              </el-form-item>
            </div>
            <div class="info-form-group-content">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="paramsCar!.name" placeholder="请填写" clearable></el-input>
              </el-form-item>
              <el-form-item label="设备类型" prop="typeId">
                <el-select v-model="paramsCar!.typeId" placeholder="请选择" clearable>
                  <el-option v-for="item in getDict('accessoryType')" :key="item.name" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="品牌" prop="brandId">
                <el-select v-model="paramsCar!.brandId" placeholder="请选择" clearable>
                  <el-option v-for="item in getDict('accessoryBrand')" :key="item.name" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="设备型号" prop="partsModel">
                <el-input v-model="paramsCar!.partsModel" placeholder="请填写" clearable></el-input>
              </el-form-item>
              <el-form-item label="推荐更换周期（日）" prop="replacementCycle">
                <el-input v-model="paramsCar!.replacementCycle" placeholder="请填写" clearable></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="paramsCar!.remark" placeholder="请填写" clearable></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <template #footer v-if="paramsCar.uiType != 2">
        <el-button @click="drawerVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive, onMounted, defineModel, computed } from "vue"; // getCurrentInstance
import { ElMessage, FormInstance } from "element-plus";
import { partAdd, partUpdate } from "@/api/modules/carType";
import { useDict } from "@/hooks/useDict";
import Upload from "@/components/Upload/Img.vue";
import { PRODUCT } from "@/constants";
import mittBus from "@/utils/mittBus";

const { getDict } = useDict(["accessoryType", "accessoryBrand"]);
// hook
const drawerVisible = defineModel("drawerVisible", {
  type: Boolean,
  default: false
});
const paramsCar = defineModel("paramsCar", {
  type: Object
});

// 弹出框名称
const dialogLabel = computed(() => ["新增配件", "编辑配件", "查看配件"][paramsCar.value.uiType]);

const rules = reactive({
  imagePath: [{ required: true, message: "请上传" }],
  name: [{ required: true, message: "请填写" }]
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      let { uiType, ...rest } = paramsCar.value;
      rest.typeName = getDict("accessoryType").find((item: any) => item.id === rest.typeId)?.name;
      rest.brandName = getDict("accessoryBrand").find((item: any) => item.id === rest.brandId)?.name;
      if (uiType === 0) {
        await partAdd(rest);
      } else {
        await partUpdate(rest);
      }
      ElMessage.success({ message: `${dialogLabel.value}配件成功！` });
      drawerVisible.value = false;
      mittBus.emit("searchAccessory");
    } catch (error) {
      console.log(error);
    }
  });
};

onMounted(async () => {});
</script>
<style lang="scss" scoped>
.drawer {
  display: flex;
  gap: 60px;
  .device-icon {
    width: 230px;
  }
  .info-form-group-content {
    display: grid;
    flex: 1;
    grid-template-rows: repeat(3, 95px);
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    margin-top: 0;
  }
}
.el-select {
  width: 100%;
}
.info-container {
  height: auto !important;
}
</style>
